<template>
	<div class="img-upload">
		<van-tabbar v-model="active" @change="onChange" inactive-color='#999' active-color="#FF9600">
			<van-tabbar-item v-for='(item,index) in navList' :key='index' :name='item.path'>
				<span>{{item.name}}</span>
				<template #icon="props">
					<img :src="props.active ? item.icon_active : item.icon" />
				</template>
			</van-tabbar-item>

		</van-tabbar>
	</div>
</template>
<script>
export default {
	data() {
		return {
			active: '',
			navList: [
				{
					name: '首页',
					icon: require('../../assets/images/sy.png'),
					icon_active: require('../../assets/images/sy2.png'),
					path: '/home',
				},
				{
					name: '卡卷中心',
					icon: require('../../assets/images/kjzx.png'),
					icon_active: require('../../assets/images/kjzx2.png'),
					path: '/coupon/home',
				},
				{
					name: '我的',
					icon: require('../../assets/images/wd.png'),
					icon_active: require('../../assets/images/wd2.png'),
					path: '/personal/home',
				},
			],
		};
	},
	created() {},
	mounted() {
		setTimeout(() => {
			// console.log(this.$route);
			this.active = this.$route.path;
		}, 500);
		this.get_index();
	},
	watch: {
		$route(to, from) {
			console.log(to.path);
			this.active = to.path;
		},
	},
	methods: {
		get_index() {
			var params = {
				lng: this.$store.state.lng,
				lat: this.$store.state.lat,
			};
			this.$myApi.get_index(params).then((res) => {
				if (res.code == 0) {
					var navList = [];
					res.result.map((item) => {
						if (item.typeName == '底部栏') {
							item.form.imgList.map((item2) => {
								navList.push({
									name: item2.title,
									icon: item2.urlList[0].url,
									icon_active: item2.urlList[1].url,
									path: item2.link,
								});
							});
						}
					});

					this.navList = navList;
				}
			});
		},
		onChange(path) {
			console.log(path);
			this.$router.push(path);
		},
	},
};
</script>
